<!-- 指定该文件继承于base.html文件-->
{% extends 'base.html' %}
<!-- 代码只能写在main块中，也就是只有这个块的内容与母版不同，其他的内容是相同的-->
{% block main %}
<!-- 如果传入的参数error_msg有值则显示其中的内容，视图把错误信息放在这个变量中 -->
{% if error_msg %}
<p>{{ error_msg }}</p>
{% endif %}
<!-- 通过for循环从blog_list中取出每个Blog实例对象，存到blog -->
{% for blog in blog_list %}
<!-- 引用Bootstrap框架的媒体组件，这是开头-->
<div class="media">
    <div class="media-left">
        <!-- 指定单击头像重定向到的路径-->
        <a href="{% url 'blog:authorindex' blog.author.id %}">
            <!--<img>标签的src属性值，注意/media/的前缀，这个前缀会根据settings.py的配置进行解析-->
            <img class="media-object" src="/media/{{ blog.author.head_img}}" style="width:100px;height:100px;" alt="单击头像显示此作者的博客文章列表">
        </a>
    </div>
    <div class="media-body">
        <!--　指定了文章的标题，并指定单击标题重定向到的URL-->
    <h3 class="media-heading">
        <a href="{% url 'blog:detail' blog.pk %}">{{ blog.title }}</a>
    </h3>
        <!--　文章的摘要，用了safe过滤器 -->
        <p>{{ blog.excerpt|safe }}...</p>
        <div class="entry-meta">
            <!--　以下5个<span>标签分别显示文章的分类、发表时间、作者、评论数、阅读数 -->
            <span class="blog-category"><a href="#">{{ blog.category.name }}</a></span>
            <span class="blog-date">
                <a href="#">
                    <time class="entry-date" datetime="{{ blog.created_time }}">{{ blog.created_time }}</time>
                </a>
            </span>
            <span class="blog-author"><a href="#">{{ blog.author.nikename }}</a></span>
            <span class="comments-link"><a href="#">{{ blog.comment_set.count }} 评论</a></span>
            <span class="views-count"><a href="#">{{ blog.views }} 阅读</a></span>
        </div>
    </div>
    {% empty %}
    <div class="no-post">暂时还没有发布的文章！
    </div>
    {% endfor %}
    <!--　引用Bootstrap框架的媒体组件的结尾--><!--　判断是否分页-->
    {% if is_paginated %}
    <!--　引用Bootstrap框架的分页组件，分页组件开始-->
    <nav aria-label="Page navigation">
        <ul class="pagination">{% if left %}
            <li>
                <!--　上一页的URL、页码符（<<）的设置-->
                <a href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <!-- &laquo;在HTML文件中表示<<，是两个左角括号，为了避免与HTML符号混淆所以用字符表示-->
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% else %}
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            {% endif %}
        <!--　把当前页码前面的页码通过循环从left变量中取出来-->
            {% for i in left %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
            {% endfor %}
            <!--　当前页URL、页码设置-->
            <li class="active">
                <a href="?page={{ page_obj.number }}">{{ page_obj.number }} <span class="sr-only">(current)</span></a>
            </li>
            {% for i in right %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
            {% endfor %}{% if right %}
            <li>
                <!-- &raquo;在HTML文件中表示>>，是两个右角括号，为了避免与HTML符号混淆所以用字符表示-->
                <a href="?page={{ page_obj.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
            </li>
            {% else %}
            <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
            {% endif %}
        </ul>
    </nav>
    <!--　分页组件结尾-->
    {% endif %}
    {% endblock main %}